<template>
  <div>
    <div class="sys-breadcrumb">
      我的大屏
      <el-button-group class="sys-breadcrumb-handle">
        <el-button type="text" @click="add" icon="el-icon-circle-plus">新增大屏</el-button>
      </el-button-group>
    </div>
    <el-card>
      <el-table :data="list" style="width: 100%" border stripe>
        <el-table-column prop="name" label="大屏"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1">未发布</span>
            <a v-else @click="open(scope.row.releaseUrl)">已发布</a>
          </template>
        </el-table-column>
        <el-table-column prop="action" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="preview(scope.row)" v-if="scope.row.status == 2">预览</el-button>
            <el-button type="text" @click="release(scope.row)" v-if="scope.row.status == 1">发布</el-button>
            <el-button type="text" @click="edit(scope.row)">编辑</el-button>
            <el-button type="text" @click="remove(scope.row)">删除</el-button>
            <el-button type="text" @click="copy(scope.row)" v-if="scope.row.status == 2">复制</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="新建大屏" :visible.sync="form.show">
      <el-form ref="displayform" status-icon :model="form" :rules="displayrules">
        <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input v-model="form.descMsg" type="textarea" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="背景图片" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            :headers="uploadheader"
            :action="uploadaction"
            :show-file-list="false"
            name="multipartFile"
            :on-success="handleBackImgSuccess"
          >
            <img v-if="form.backImg" :src="'http://106.12.93.1' + form.backImg" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div class="el-upload__tip" slot="tip">请上传1920 * 1080比例的jpg/png背景图片</div>
          </el-upload>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="form.show = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="复制大屏" :visible.sync="cform.show">
      <el-form ref="displaycform" status-icon :model="cform" :rules="displayrules">
        <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="cform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input v-model="cform.descMsg" type="textarea" autocomplete="off"></el-input>
        </el-form-item>        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cform.show = false">取 消</el-button>
        <el-button type="primary" @click="copySubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Services from "@/services";
import API from "@/services/api";
import Util from "@/libs/util";
export default {
  data() {
    var validateName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入名称"));
      } else {
        callback();
      }
    };
    return {
      formLabelWidth: "80px",
      form: {
        show: false,
        name: "",
        status: 1,
        descMsg: "",
        backImg: "",
        templateId: 0
      },
      cform: {
        bsId: 0,
        show: false,
        name: "",
        descMsg: ""
      },
      uploadaction: API.displays.upload,
      uploadheader: {
        Authorization: Util.getStore("token")
      },
      list: [],
      displayrules: {
        name: [{ validator: validateName, trigger: "blur" }]
      },
      templates: []
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      Services.DISPLAYS_LIST().then(res => {
        this.list = res;
      });

    },
    add() {
      this.form.show = true;
      // Services.DISPLAYS_LIST_TEMPLATE().then(res => {
      //   this.templates = res.data
      // })
    },
    handleBackImgSuccess(e) {
      if (e.code === 0) {
        this.form.backImg = e.filePath;
      }
    },
    submit() {
      this.$refs.displayform.validate(valid => {
        if (valid) {
          //if(this.form.templateId == 0){
            Services.DISPLAYS_ADD(this.form).then(res => {
              if (res.code === 0) {
                this.$message({
                  message: "添加成功",
                  type: "success"
                });
                this.form.show = false;
                this.init();
              }
            });
          // } else {
          //   Services.DISPLAYS_ADD_BY_TEMPLATE(this.form).then(res => {
          //     if (res.code === 0) {
          //       this.$message({
          //         message: "添加成功",
          //         type: "success"
          //       });
          //       this.form.show = false;
          //       this.init();
          //     }
          //   })
          // }
        }
      });
    },
    copySubmit() {
      this.$refs.displaycform.validate(valid => {
        if (valid) {
            console.log(this.cform)
            Services.DISPLAYS_COPY_BY_TEMPLATE(this.cform).then(res => {
              if (res.code === 0) {
                this.$message({
                  message: "添加成功",
                  type: "success"
                });
                this.cform.show = false;
                this.init();
              }
            });
          // } else {
          //   Services.DISPLAYS_ADD_BY_TEMPLATE(this.form).then(res => {
          //     if (res.code === 0) {
          //       this.$message({
          //         message: "添加成功",
          //         type: "success"
          //       });
          //       this.form.show = false;
          //       this.init();
          //     }
          //   })
          // }
        }
      });
    },
    remove(display) {
      this.$confirm("此操作将永久删除该大屏, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        Services.DISPLAYS_REMOVE({
          id: display.id
        }).then(res => {
          this.init();
        });
      });
    },
    edit(display) {
      this.$router.push({
        name: "displaysEdit",
        params: display
      });
    },
    open(url) {
      var tempwindow = window.open("_blank");
      tempwindow.location = url;
    },
    release(display) {
      Services.DISPLAYS_RELEASE({
        id: display.id
      }).then(res => {
        if (res.code === 0) {
          this.$message({
            message: "发布成功",
            type: "success"
          });
          this.init()
        } else {
          this.$message({
            message: "添加失败",
            type: "error"
          });
        }
      });
    },
    preview(display) {
      let routeUrl = this.$router.resolve({
        name: "displaysPreview",
        params: {
          id: display.releaseId
        }
      });
      window.open(routeUrl.href, "_blank");
    },
    copy(display){
      // console.log(display)
      this.cform.bsId = display.id
      this.cform.show = true;
    }
  }
};
</script>
<style lang="less">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 260px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 260px;
  height: 150px;
  display: block;
}
</style>
